<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const props = defineProps<{
    doctorId: string | number;
}>();

const router = useRouter();
const questions = ref([]);

const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    const month = date.getMonth() + 1;
    const day = date.getDate();
    const hours = date.getHours().toString().padStart(2, '0');
    const minutes = date.getMinutes().toString().padStart(2, '0');
    return `${month}月${day}日 ${hours}:${minutes}`;
};

const navigateToDetail = (questionId: number) => {
    router.push(`/qa/${questionId}`);
};

const fetchQuestions = async () => {
    try {
        // Get questions for the current doctor
        const questionsResponse = await axios.get(`http://127.0.0.1:8000/doctor/questionabc/0/${props.doctorId}/`);

        // Get answers for each question from the current doctor
        const questionsWithAnswers = await Promise.all(
            questionsResponse.data.map(async (question) => {
                const answerResponse = await axios.get(`http://127.0.0.1:8000/doctor/answerabc/${question.id}/${props.doctorId}/`);
                const answers = answerResponse.data;

                // Only include questions that have answers from the current doctor
                if (answers && answers.length > 0) {
                    return {
                        ...question,
                        answer: answers[0] // Take the first answer since we're filtering by doctor
                    };
                }
                return null;
            })
        );

        // Filter out questions without answers
        questions.value = questionsWithAnswers.filter(qa => qa !== null);
    } catch (error) {
        console.error('Error fetching Q&A:', error);
    }
};

onMounted(() => {
    fetchQuestions();
});
</script>

<template>
    <div v-if="questions.length > 0" class="qa-section">
        <h2>医生问答</h2>
        <div v-for="qa in questions" :key="qa.id" class="qa-item" @click="navigateToDetail(qa.id)">
            <div class="qa-content">
                <div class="qa-row">
                    <div class="qa-left">
                        <span class="tag question-tag">问</span>
                        <div class="content" v-html="qa.content"></div>
                    </div>
                    <span class="date">{{ formatDate(qa.created_time) }}</span>
                </div>
                <div class="qa-row">
                    <div class="qa-left">
                        <span class="tag answer-tag">答</span>
                        <div class="content" v-html="qa.answer.content"></div>
                    </div>
                    <span class="date">{{ formatDate(qa.answer.created_time) }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.qa-section {
    margin: 32px 0;
    padding: 24px 0;
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.qa-section h2 {
    font-size: 18px;
    margin-bottom: 24px;
}

.qa-item {
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    margin-bottom: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.qa-item:hover {
    background: #f5f5f5;
}

.qa-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.qa-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.qa-left {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    color: white;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.question-tag {
    background: #00b38a;
}

.answer-tag {
    background: #ff9500;
}

.content {
    flex: 1;
    color: #333;
    line-height: 1.6;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.date {
    font-size: 14px;
    color: #999;
    flex-shrink: 0;
    margin-left: 16px;
}

:deep(p) {
    margin: 0;
}

:deep(img) {
    max-width: 100%;
    height: auto;
}
</style>